<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind指令讲解</title>
		<script src="js/vue.global.js"></script>
	</head>
	<body>
		<!-- 课堂练习：
		 1、做一个记事本的案例，当在记事本中添加内容，会直接在列表中进行显示
		 2、在记事本每一条记录的后面，可以点击删除，删除掉当前的记录内容
		 3、在记事本的左下角显示当前的记录条数
		 4、在记事本的右下角可以点击清空，则记录内容全部消失
		 5、当列表中没有记录时，下面关于显示的记录条数以及清空按钮隐藏-->
		<div id="app">
			<button @click="changeWord()">更新表单中的数据</button>
			<input v-model="msg"/>
			{{msg}}
		</div>

	</body>
	<script>
	var app=new Vue({
		// el:用于元素的挂载，绑定页面上声明的元素的选择器
		el:"#app",
		// data指定vue中需要用到的数据对象
		data:{
			msg:"v-model指令演示"
		},
		methods:{
			changeWord:function(){
				this.msg="小小指令，拿下！"
			}
		}
	})
	</script>
</html>
